<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			table {
				width: 400px;
				border: 1px solid #000;
				border-collapse: collapse;
				margin: 0 auto;
			}

			td,
			th {
				border: 1px solid #000;
				text-align: center;
			}

			input {
				width: 50px;
			}

			.search {
				width: 600px;
				margin: 20px auto;
			}
		</style>
	</head>

	<body>
		<div class="search">
			按照价格查询: <input type="text" class="start" /> -
			<input type="text" class="end" />
			<button class="search-price">搜索</button> 按照商品名称查询:
			<input type="text" class="product" />
			<button class="search-pro">查询</button>
		</div>
		<table>
			<thead>
				<tr>
					<th>id</th>
					<th>产品名称</th>
					<th>价格</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<script>
			let data = [
				{
					id: 1,
					pname: '小米',
					price: 3999,
				},
				{
					id: 2,
					pname: 'oppo',
					price: 999,
				},
				{
					id: 3,
					pname: '荣耀',
					price: 1299,
				},
				{
					id: 4,
					pname: '华为',
					price: 1999,
				},
			];

			// 1. 获取相应的元素
			let tbody = document.querySelector('tbody');
			let start = document.querySelector('.start');
			let end = document.querySelector('.end');
			let search_price = document.querySelector('.search-price');
			let search_pro = document.querySelector('.search-pro');
			let product = document.querySelector('.product');

			setData(data);
			// 2. 把数据渲染到页面上
			function setData(myData) {
				// 先清空原来 tbody 里的数据
				tbody.innerHTML = '';
				myData.forEach(function (value) {
					let tr = document.createElement('tr');
					tr.innerHTML =
						'<td>' +
						value.id +
						'</td><td>' +
						value.pname +
						'</td><td>' +
						value.price +
						'</td>';

					tbody.appendChild(tr);
				});
			}

			// 3. 根据价格查询商品
			// 当点击按钮，就可以根据商品价格筛选数组里的对象
			search_price.addEventListener('click', function () {
				let newData = data.filter(function (value) {
					return value.price >= start.value && value.price <= end.value;
				});
				console.log(newData);

				setData(newData);
			});

			// 4. 根据商品名称查询商品
			// 如果查询数组中唯一的元素，用 some 方法更合适，因为它找到这个元素，就不再进行循环了，效率更高

			search_pro.addEventListener('click', function () {
				let arr = [];
				data.some(function (value) {
					if (value.pname === product.value) {
						arr.push(value);
						return true;
					}
				});
				setData(arr);
			});
			// 把拿到的数据渲染到页面中
		</script>
	</body>
</html>
